<template>
	<view>
		<u-navbar :back-icon-name="backIconName" :is-back="false" :background="background">
			<view class="d-flex a-center">
				<image src="../../static/images/promotion/backtrack.png.png" mode="" class="backtrack ml-2" @click="backtrack_img"></image>
				<view class="ml-2 font-32">编辑现金减免</view>
			</view>		
		</u-navbar>
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view v-else>
			<view class="m-2  mb-2 bg-white rounded-20">
				<view class="ml-3">
					<view class="clazz d-flex j-sb a-center">
						<view class="white-space">商品名称</view>
						<view class="d-flex a-center j-center mx-3">
							<input type="text" class="text-right mr ellipsis-1" value="" v-model="goods_name" @input="goods_input" />
						</view>
					</view>
				</view>
			</view>
			<view class="m-2  mb-2 bg-white rounded-20">
				<view class="ml-3">
					<view class="border-bottom clazz d-flex j-sb a-center">
						<view class="white-space">金额下限（元）</view>
						<view class="d-flex a-center j-center mx-3">
							<input type="digit" class="text-right mr" value="" v-model="min_price" @input="min_input" />
						</view>
					</view>
					<view class="clazz d-flex j-sb a-center">
						<view class="">立减（元）</view>
						<view class="d-flex a-center j-end mr-3 w-50">
							<input type="digit" class="text-right mr" value="" v-model="stand_price" @input="stand_input" />
						</view>
					</view>
				</view>
			</view>
			
			<view class="rounded-20 m-2 pl-3  bg-white" >
				<view class="d-flex j-sb pr-3 py-3 border-bottom" @click="initiate">
					<view class="">开始时间</view>
					<view class="d-flex j-center a-center">
						<view class="text-right mr-1" >{{initiate_time}}</view>
						<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>
				<view class="d-flex j-sb pr-3 py-3" @click="conclude">
					<view class="">结束时间</view>
					<view class="d-flex j-center a-center">
						<view class="text-right mr-1">{{conclude_time}}</view>
						<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>		
			</view>
			
			<view class="mx-2 mb-2 bg-white rounded-20">
				<view class="ml-3">
					<view class=" a-center  py-3 d-flex j-sb clazz" @click="estate_to">
						<view class="">会员等级</view>
						<view class="mr-3 d-flex" v-if="estate_item">
							<view class="mr-1" v-for="(item,index) in estate_item" :key="index">
								{{item.rank_name}}
							</view>
							<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
						</view>
						<view class="mr-3 d-flex" v-else>
							<view class="mr-1" v-for="(item,index) in cash_detail.user_rank_list" v-if="item.checked" :key="index">
								{{item.rank_name}}
							</view>
							<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
						</view>
					</view>
				</view>
			</view>
			
			<view class="m-2  mb-2 bg-white rounded-20">
				<view class="ml-3">
					<view class="clazz d-flex j-sb a-center" :class="cash_detail.act_range_ext.length>0?'border-bottom':''" @click="discountTo">
						<view class="white-space">优惠范围</view>
						<view class="d-flex a-center j-center mx-3">
							<text class="mr-1 ellipsis-1" v-if="cash_detail.act_range==0">全部商品</text>
							<text class="mr-1 ellipsis-1" v-if="cash_detail.act_range==1">指定分类</text>
							<text class="mr-1 ellipsis-1" v-if="cash_detail.act_range==2">指定品牌</text>
							<text class="mr-1 ellipsis-1" v-if="cash_detail.act_range==3">指定商品</text>
							<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
						</view>
					</view>
					<!-- selected_show -->
					<view v-if="cash_detail.act_range_ext.length>0" class="a-center  py-3 d-flex j-sb clazz" @click="selectedTo">
						<view class="white-space" v-if="act_range==1||cash_detail.act_range==1">已选分类</view>
						<view class="white-space" v-else-if="act_range==2||cash_detail.act_range==2">已选品牌</view>
						<view class="white-space" v-else-if="act_range==3||cash_detail.act_range==3">已选商品</view>
						<view class="mr-3 d-flex">
							<text class="ellipsis-1 mx-1" v-if="act_range==1||cash_detail.act_range==1">已选{{count?count.length:cash_detail.act_range_ext.length}}个分类</text>
							<text class="ellipsis-1 mx-1" v-else-if="act_range==2||cash_detail.act_range==2">已选{{count?count.length:cash_detail.act_range_ext.length}}个品牌</text>
							<text class="ellipsis-1 mx-1" v-else-if="act_range==3||cash_detail.act_range==3">已选{{count?count.length:cash_detail.act_range_ext.length}}个商品</text>
							<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
						</view>
					</view>
				</view>
			</view>
			
			<view class="w-100 d-flex j-end p-2">
				<view class="copy rounded-20" @click="copy_activity">复制活动</view>
			</view>
		</view>
		<!-- 返回提示 -->
		<u-popup v-model="popup_show" class="logOutPopup" mode='center' border-radius="20">
				<view class="popup_wd">
					<view class="py-5 text-center bg-white">你的信息还未保存，返回后将会丢失</view>
					<view class="d-flex  bg-light-secondary border-top">
						<view class="flex-1 py-2 text-center border-right text-danger" @click="Off">取消</view>
						<view class="flex-1 py-2 text-center text-danger" @click="Confirm">确定返回</view>
					</view>	
				</view>
		</u-popup>
		
		<view class="footer"></view>
		
		<view class="d-flex sub j-sb bg-white p-2 w-100 position-fixed bottom-0">
			<button type="warn" class="dele" @click="sub_dele">删除</button>
			<button type="warn" class="rele" @click="sub_rele">保存</button>
		</view>
		
		<u-toast ref="uToast" />
		<!-- 开始 -->
		<u-picker v-model="initiate_show" mode="time" @confirm="initiate_confirm"></u-picker>
		<!-- 结束 -->
		<u-picker v-model="conclude_show" mode="time" @confirm="conclude_confirm"></u-picker>
		<!-- 退出弹出层 -->
		<uni-popup ref="popup" type="center" class="logOutPopup">
			<view class="popup_wd">
				<view class="py-2 bg-danger text-white text-center">提示</view>
				<view class="py-5 text-center bg-white">是否确定要删除？</view>
				<view class="d-flex  bg-light-secondary border-top">
					<view class="flex-1 py-2 text-center border-right" @click="Off_dele">取消</view>
					<view class="flex-1 py-2 text-center" @click="Confirm_dele">确定</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 会员等级 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="estate_show">
			<!-- 内容 -->
			<view class="bg-white rounded-top">
				<view class="d-flex j-sb py-3 border-bottom px-4">
					<view class="text-999" @click="cancel_estate">取消</view>
					<view class="text-000 font-35">选择会员等级</view>
					<view class="text-danger" @click="next_sub">确定</view>
				</view>
				<!-- 内容 -->
				<view class="ml-2 pl-2 bg-white">
					<u-checkbox-group wrap>
						<view class="d-flex a-center checkbox" v-for="(item,index) in cash_detail.user_rank_list" :key="index">
							<u-checkbox size="45" shape="circle"
								v-model="item.checked" active-color="#F24F4A"
								>
							<view class="py-3 border-bottom  flex-1 w-100">
								{{item.rank_name}}
							</view>
							</u-checkbox>
						</view>
					</u-checkbox-group>
				</view>
			</view>
		</s-popup>
		
		<!-- 优惠范围弹框 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="discount_show">
			<!-- 头部 -->
			<view class="bg-white rounded-top">
				<view class="d-flex j-sb py-3 border-bottom px-4">
					<view class="text-999"></view>
					<view class="text-000 font-35">选择优惠范围</view>
					<view class="" @click="cancel_discount">
						<u-icon name="close" color="#999999" size="35"></u-icon>
					</view>
				</view>
				<!-- 内容 -->
				<view class="d-flex j-center a-center">
					<view class="content span-19 rounded-20 ml-4">
						<view class="py-3 border-bottom d-flex j-sb" @click="all_goods">
							<view class="">全部商品</view>
							<view class="mr-4">
								<u-icon name="arrow-right" color="#999999" size="35"></u-icon>
							</view>
						</view>
						<view class="py-3 border-bottom d-flex j-sb" @click="classify">
							<view class="">指定分类</view>
							<view class="mr-4">
								<u-icon name="arrow-right" color="#999999" size="35"></u-icon>
							</view>
						</view>
						<view class="py-3 border-bottom d-flex j-sb" @click="brandTo">
							<view class="">指定品牌</view>
							<view class="mr-4">
								<u-icon name="arrow-right" color="#999999" size="35"></u-icon>
							</view>
						</view>
						<view class="py-3 border-bottom d-flex j-sb" @click="goodsTo">
							<view class="">指定商品</view>
							<view class="mr-4">
								<u-icon name="arrow-right" color="#999999" size="35"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</s-popup>
	</view>
</template>

<script>
	import sPopup from '../../components/s-popup/index.vue';
	export default {
		components: {
				sPopup
		},
		data() {
			return {
				background: {
					backgroundColor: '#ffffff',
				},
				act_id:'', // 商品ID
				cash_detail:"", // 详情
				initiate_show:false,// 开始 开关
				initiate_time:"", // 开始时间
				conclude_show:false, // 结束开关
				conclude_time:"", // 结束时间
				popup_show:false,
				user_rank:"", // 会员等级ID
				discount_show:false, // 优惠范围 弹框
				act_range:"", // 优惠类型
				count:"", // 已选数量
				count_legth:"", // 已选数量
				goods_name:"", // 商品名称
				min_price:"", // 金额下限
				stand_price:"", // 立减
				selected_show:"", // 已选
				
				estate_show:false, // 会员弹框
				estate_item:"", // 会员列表
				
				u_loadmore:true, // 加载中
			}
		},
		methods: {
			// 商品
			goods_input(e){
				this.goods_name=e.detail.value
			},
			// 金额下限
			min_input(e){
				this.min_price=e.detail.value
			},
			// 立减
			stand_input(e){
				this.stand_price=e.detail.value
			},
			// 开始时间
			initiate(){
				this.initiate_show=true
			},
			// 结束时间
			conclude(){
				this.conclude_show=true
			},
			// 开始
			initiate_confirm(e){
				let time=`${e.year}-${e.month}-${e.day}`;
				if(new Date(time).getTime()>new Date(this.conclude_time).getTime()){
					this.$refs.uToast.show({
						title: '开始日期不能晚于结束日期',
						type: 'default',
						duration:1000,
					})
				}else{
					this.initiate_time=time
					console.log(1)
				}
			},
			// 结束
			conclude_confirm(e){
				let time=`${e.year}-${e.month}-${e.day}`;
				if(new Date(time).getTime()<new Date(this.initiate_time).getTime()){
					this.$refs.uToast.show({
						title: '结束日期不能早于开始日期',
						type: 'default',
						duration:1000,
					})
				}else{
					this.conclude_time=time
				}
			},
			// 会员等级
			estate_to(){
				this.estate_show=true
			},
			// 会员确定
			next_sub(){
				let arr=[]
				this.estate_item=this.cash_detail.user_rank_list.filter(v=>{
					if(v.checked){
						arr.push(v.rank_id)
						return v
					}
				})
				
				this.user_rank=arr
				this.estate_show=false
				console.log(this.estate_item)
			},
			// 优惠范围
			discountTo(){
				this.discount_show=true
			},
			cancel_discount(){
				this.discount_show=false
			},
			// 已选分类
			selectedTo(){
				if(this.act_range==1||this.cash_detail.act_range==1){
					if(uni.getStorageSync("cash_classifys")){
						uni.navigateTo({
							url:`/pagesA/cash/cash-classify-selected?classify_add=分类&edit=详情&act_id=${this.act_id}&selected=${true}`
						})
					}else{
						uni.navigateTo({
							url:`/pagesA/cash/cash-classify-selected?classify_add=分类&edit=详情&act_id=${this.act_id}`
						})
					}
				}else if(this.act_range==2||this.cash_detail.act_range==2){
					if(uni.getStorageSync("cash_brands")){
						uni.navigateTo({
							url:`/pagesA/cash/cash-brand-selected?brand_add=品牌&edit=详情&act_id=${this.act_id}&selected=${true}`
						})
					}else{
						uni.navigateTo({
							url:`/pagesA/cash/cash-brand-selected?brand_add=品牌&edit=详情&act_id=${this.act_id}`
						})
					}
				}else if(this.act_range==3||this.cash_detail.act_range==3){
					if(uni.getStorageSync("cash_good")){
						uni.navigateTo({
							url:`/pagesA/cash/cash-goods-selected?goods=商品&edit=详情&act_id=${this.act_id}&selected=${true}`
						})
					}else{
						uni.navigateTo({
							url:`/pagesA/cash/cash-goods-selected?goods=商品&edit=详情&act_id=${this.act_id}`
						})
					}
				}
				
			},
			// 全部商品
			all_goods(){
				this.discount_show=false
				this.cash_detail.act_range_ext=""
				
				this.selected_show=false
				this.cash_detail.act_range=0
				this.act_range=0
			},
			// 取消
			cancelMore(){
				this.discount_show=false
			},
			// 指定分类
			classify(){
				this.discount_show=false
				uni.navigateTo({
					url:'/pagesA/cash/cash-classify'
				})
			},
			// 指定品牌
			brandTo(){
				this.discount_show=false
				uni.navigateTo({
					url:'/pagesA/cash/cash-brand'
				})
			},
			// 指定商品
			goodsTo(){
				this.discount_show=false
				uni.navigateTo({
					url:"/pagesA/cash/cash-goods"
				})
			},
			
			// 取消
			cancel_estate(){
				this.estate_show=false
			},
			
			// 已选分类
			cash_class(){
				
			},
			// 删除
			sub_dele(){
				 this.$refs.popup.open()
			},
			Off_dele(){
				this.$refs.popup.close()
			},
			Confirm_dele(){
				this.$H.post("admin/favourable/delete",{
					act_id:this.act_id,
				}).then(res=>{
					console.log(res)
					uni.navigateBack({
						delta:1
					})
				})
			},
			// 复制现金减免活动
			copy_activity(){
				uni.navigateTo({
					url:'/pagesA/cash/cash-copy?act_id='+this.act_id
				})
			},
			// 保存
			sub_rele(){
				// 优惠范围
				let act_range_ext=[]
				// selected_show
					if(this.act_range==1||this.act_range==2){
						if(this.count){
							this.count.filter(v=>{
								act_range_ext.push(v.cat_id||v.brand_id)
							})
						}else{
							this.cash_detail.act_range_ext.filter(v=>{
								act_range_ext.push(v.id)
							})
						}
						
					}else if(this.act_range==3){
						if(this.count){
							this.count.filter(v=>{
								act_range_ext.push(v.goods_id)
							})
						}else{
							this.cash_detail.act_range_ext.filter(v=>{
								act_range_ext.push(v.id)
							})
						}
					}else{
						if(this.cash_detail.act_range){
							console.log(3)
							this.cash_detail.act_range_ext.filter(v=>{
								act_range_ext.push(v.id)
							})
						}
					}
					console.log(act_range_ext)
				this.$H.post("admin/favourable/update",{
					act_id:this.act_id,
					act_name:this.goods_name,
					start_time:this.initiate_time,
					end_time:this.conclude_time,
					user_rank:this.user_rank.toString(),
					act_type:1,
					act_range_ext:act_range_ext.toString(),
					act_type_ext:this.stand_price.replace('￥',''),
					min_amount:this.min_price.replace('￥',''),
					act_range:this.act_range||this.cash_detail.act_range,
				}).then(res=>{
					console.log(res)
					this.$refs.uToast.show({
						title: '编辑成功！',
						type: 'success',
						duration:1000,
						callback:()=>{
							uni.navigateBack({
								delta:1
							})
						}
					})
				})
			},
			// 返回
			backtrack_img(){
				this.popup_show=true
			},
			// 返回
			Confirm(){
				uni.navigateBack({
					delta:1
				})
			},
			// 取消弹框
			Off(){
				this.popup_show=false
			}
		},
		onShow() {
			var globalData = getApp().globalData.act_range;
			this.act_range=globalData
			if(getApp().globalData.act_range){
				this.cash_detail.act_range=this.act_range
			}
			var globalData = getApp().globalData.selected;
			this.selected_show= globalData;
			console.log(this.selected_show)
			if(this.act_range==1){
				if(uni.getStorageSync("cash_classify")){
					this.count=JSON.parse(uni.getStorageSync("cash_classify"))
					this.cash_detail.act_range_ext=JSON.parse(uni.getStorageSync("cash_classify"))
				}else if(uni.getStorageSync("cash_classifys")){
					this.cash_detail.act_range_ext=JSON.parse(uni.getStorageSync("cash_classifys"))
				}
			}else if(this.act_range==2){
				if(uni.getStorageSync("cash_brand")){
					this.count=JSON.parse(uni.getStorageSync("cash_brand"))
					this.cash_detail.act_range_ext=JSON.parse(uni.getStorageSync("cash_brand"))
				}else if(uni.getStorageSync("cash_brands")){
					this.cash_detail.act_range_ext=JSON.parse(uni.getStorageSync("cash_brands"))
				}
			}else if(this.act_range==3){
				if(uni.getStorageSync("cash_goods")){
					this.count=JSON.parse(uni.getStorageSync("cash_goods"))
					this.cash_detail.act_range_ext=JSON.parse(uni.getStorageSync("cash_goods"))
				}else if(uni.getStorageSync("cash_good")){
					this.cash_detail.act_range_ext=JSON.parse(uni.getStorageSync("cash_good"))
				}
			}
		},
		onUnload() {
			uni.removeStorageSync("cash_classify")
			uni.removeStorageSync("cash_classifys")
			uni.removeStorageSync("cash_brand")
			uni.removeStorageSync("cash_brands")
			uni.removeStorageSync("cash_goods")
			uni.removeStorageSync("cash_good")
			var globalData = getApp().globalData.act_range;
			getApp().globalData.act_range=""
			var globalData = getApp().globalData.selected;
			getApp().globalData.selected=false;
		},
		onLoad(e) {
			this.act_id=e.act_id
			this.$H.post("admin/favourable/info",{
				act_id:e.act_id
			}).then(res=>{
				this.cash_detail=res.data
				// 会员等级
				let arr=[]
				this.cash_detail.user_rank_list.filter(v=>{
					if(v.checked){
						arr.push(v.rank_id)
						return v
					}
				})
				this.user_rank=arr
				this.u_loadmore=false 
				this.goods_name=this.cash_detail.act_name // 商品名称
				this.min_price=this.cash_detail.formatted_min_amount // 金额下限
				this.stand_price=this.cash_detail.act_type_ext // 立减
				
				this.initiate_time=this.cash_detail.formatted_start_time.substr(0,10)
				this.conclude_time=this.cash_detail.formatted_end_time.substr(0,10)
			})
		}
	}
</script>

<style>
	.logOutPopup /deep/ .popup_wd{
		width: 600upx;
	}
	.sub{
		z-index: 111;
	}
	.sub /deep/ .dele{
		border: 1px solid #CCCCCC;
		background-color: #FFFFFF;
		border-radius: 60upx;
		width: 45%;
		color: #000000;
	}
	.sub /deep/ .dele::after{
		border: none;
		color: #000000;
	}
	.sub /deep/ .rele{
		width: 45%;
		border-radius: 60upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.copy{
		padding: 0 30upx;
		height: 80upx;
		color: #FF0000;
		border: 1px solid #FF0000;
		line-height: 80upx;
	}
	
	u-checkbox{
		width: 100%;
	}
	.u-checkbox__label{
		width: 100%;
		margin-right: 0rpx!important;
	}
</style>
